<template>
    <div class="alarmPieChart">
        <div ref="alarmPieChart" style="width: 100%; height: 100%"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
    name: "alarmPieChart",
    components: {},
    data() {
        return {
            myChart: null,
            pieData: [],
        };
    },
    props: {},
    computed: {},
    methods: {
        echartsInit() {
            this.myChart = echarts.init(this.$refs.alarmPieChart);
            var img = require('@/assets/images/pie_img2.png')
            var color1 = ["#61B5FF", "#FFCC01", "#FF9502", "#FF3A30"]
            var color2 = ["#B3B3B3","#61B5FF", "#FFCC01", "#FF9502", "#FF3A30"]
            //配置信息
            var option = {
                color: this.pieData.length == 4 ?color1:color2,
                graphic: {
                    elements: [{
                        type: "image",
                        z: 3,
                        style: {
                            image: img,
                            width: 260,
                            height: 260
                        },
                        left: 'center',
                        top: 'center',
                    }]
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'pie',
                        z: 5,
                        radius: ['53%', '68%'],
                        center: ['50%', '50%'],
                        data: this.pieData,
                        label: {
                        formatter: '{b}\n{c}条',
                        },
                    }
                ]
            };
            this.myChart.setOption(option);
        },
    },
    created() { },
    mounted() { },
    beforeDestroy() { },
};
</script>

<style lang="less" scoped>
.alarmPieChart {
    width: 100%;
    height: 100%;
    padding: 10px;
}
</style>